<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/gymMembership">
    <fieldset>
        <legend>GymMembership Information</legend>
        <label for="name">名字</label>
        <input type="text" id="name" name="name" /><br/>
        <label for="age">年龄</label>
        <input type="text" id="age" name="age" /><br/>
        <input type="submit" value="Search">
    </fieldset>
</form>
<table border="1">
    <thead style="background-color: #f2f2f2;">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Action</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="gymMembership, rowStat : ${GM}" th:class="${rowStat.odd} ? 'odd' : 'even'">
        <td th:text="${gymMembership.id}"></td>
        <td th:text="${gymMembership.name}"></td>
        <td th:text="${gymMembership.age}"></td>
        <td>
            <a th:href="@{/gymMembership/delete/{id}(id=${gymMembership.id})}">delete</a> |
            <a th:href="@{/gymMembership/update/{id}(id=${gymMembership.id})}">update</a> |
            <a href="/gymMembership/create">create</a>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #fddbb8; /* Light Peach Background Color */
        margin: 0; /* Remove default body margin */
        padding: 20px; /* Add some padding for content */
    }

    form {
        margin-bottom: 20px;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #4CAF50;
        color: white;
    }

    .odd {
        background-color: #f9f9f9;
    }

    .even {
        background-color: #f2f2f2;
    }

    a {
        text-decoration: none;
        color: #007bff;
    }
</style>

